<!doctype html><!--用来声明这是一个网页文件 html5 兼容模式-->
<html><!--根目录标签 html:超文本标记语言,由很多标签标记的这样一门语言-->
	<head><!--头部:不可视标签-->
		<!--网页三要素-->
		<title>自我介绍</title>
		<meta name="Author" content="李龙"><!--元标签,引入相关属性-->
		<meta charset="utf-8"><!--万国码-->
		<meta name="keywords" content="作业"><!--关键词,seo优化-->
		<meta name="description" content=""><!--页面描述-->
		<style>
		    body{font-family: "Microsoft YaHei",serif;}
            body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
            ol,ul,li{margin:0;padding:0;list-style:none;}
            img{border:none;}
			body{
				padding: 5px;
			}
			#wrap{
				overflow: hidden;
				width: 100%;
				outline: 1px solid #f66;
			}
			.top{
				float: left;
				width: 23.5%;
			}
			.top>li{
				width: 100%;
				height: 40px;
				margin-bottom: 5px;
				background-color: #f0f0f0;
			}
			#wrap .content{
				overflow: hidden;
				float: right;
				width: 74.5%;
			}
			#wrap .content>div{
				float: left;
				width: 33%;
				height: 200px;
				margin-left: 0.33%;
				margin-bottom: 5px;
				background-color: #ccc;
			}
			/*@media screen and (min-width:480px) and (max-width:960px){*/
				/*#wrap .content>div{*/
					/*width: 49.5%;*/
					/*margin-left: 0.5%;*/
				/*}*/

        </style>
		<link rel="stylesheet" href="css/960px.css" media="screen and (min-width:481px) and (max-width:960px)">
		<link rel="stylesheet" href="css/480px.css" media="screen and (max-width:480px)">
	</head>
	<body><!--身体:可视化标签-->
		<div id="wrap">
			<ul class="top">
				<li>列表内容1</li>
				<li>列表内容2</li>
				<li>列表内容3</li>
				<li>列表内容4</li>
			</ul>
			<div class="content">
				<div>内容块1</div>
				<div>内容块2</div>
				<div>内容块3</div>
				<div>内容块4</div>
				<div>内容块5</div>
				<div>内容块6</div>
			</div>
		</div>
		<script>

		</script>
	</body>
</html>